/**
 * @Creator: flx
 * @Date: 2020/3/19
 * 用户特性页面显示柱状图（系统版本、机型）
 */

import React, {useState, useEffect, useContext} from 'react';
import {Spin} from 'antd';
import echarts from 'echarts';
import {StoreContext} from '../data';
import './index.styl';

/**
 * @param title{string} - 主标题
 * @param dataList{[]} - 请求/feature/field接口返回的userFields数组
 * @param label{string} - 副标题
 */
export default props => {
    const {state: {osAndNetLoading}} = useContext(StoreContext);
    const {title, dataList} = props;
    // echarts图表DOM容器
    const containerId = `bar-${title}`;
    // 存储echarts实例
    const [eChartsInstance, setEChartsInstance] = useState(null);
    // 根据dataList数据结构生成echarts需要的数据结构(Option)
    const generateOption = dataList => {
        const yData = dataList.map(item => item.field);
        const dataSource = dataList.map(item => item.pv);
        const percentageMap = new Map();
        dataList.map(item => percentageMap.set(item.field, item.percent));
        return {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter(param) {
                    return `${param[0].name}<br/>
                            ${param[0].marker}人次:${param[0].value}<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;占比:${percentageMap.get(param[0].name)}`;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: [
                {
                    type: 'category',
                    data: yData.reverse(),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            xAxis: [
                {
                    type: 'value',
                    axisLabel: {align: 'right'}
                }
            ],
            series: [
                {
                    name: '人次',
                    type: 'bar',
                    barWidth: '60%',
                    data: dataSource.reverse(),
                    barMaxWidth: 20
                }
            ]
        };
    };
    // echarts初始化的effect
    useEffect(() => {
        const chartsContainer = echarts.init(document.getElementById(containerId));
        setEChartsInstance(chartsContainer);
        if (dataList) {
            chartsContainer.setOption(generateOption(dataList), true);
        }
        window.addEventListener('resize', chartsContainer.resize);
    }, []);

    // echarts更新的effect
    useEffect(() => {
        if (dataList && eChartsInstance) {
            eChartsInstance.setOption(generateOption(dataList), true);
        }
    }, [dataList]);

    return (
        <Spin spinning={osAndNetLoading}>
            <div className="bar-comp-container">
                <div style={{width: '100%', height: 400}} id={containerId}>
                </div>
            </div>
        </Spin>
    );
};

